import React, { useState, useEffect } from 'react';
import { Form, message } from 'antd';
import AxTable from '@/components/AxList/AxTable';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { axhttp } from '@/shared/axhttp';
import { axurl } from '@/shared/axurl';
import { axhelper } from '@/shared/axhelper';
import { AxInput, AxSelect, AxTextArea } from '@/components/AxForm/AxFormItem';
import { AxUpdateForm } from '@/components/AxForm/AxUpdateForm';
import { axconst } from '@/shared/axconst';

const { getX, postFormX } = axhttp;
const url = axurl.center.s.flow.need.major;

/** 转专业 - 业务表单 */
export const Transfer: React.FC<any> = (props) => {
    const { recordId, canEdit } = props;
    const [data, setData] = useState<any>({ list: [] });
    const [loading, setLoading] = useState(false);
    const [updateVisible, setUpdateVisible] = useState<any>(false);
    const [operateValues, setOperateValues] = useState<any>({});
    const [columns, setColumns] = useState<any>([
        {
            title: '所属部门',
            dataIndex: 'campusName',
            width: axconst.width.fouronly,
        },
        {
            title: '采购主体地址',
            dataIndex: 'schemeName',
            width: axconst.width.scheme,
        },
        {
            title: '申请说明',
            dataIndex: 'majorName',
            width: axconst.width.major,
        },
    ]);

    useEffect(() => {
        setLoading(true);
        getX(url.changeMajorInfo, { recordId: recordId })
            .then((res: any) => {
                setData({
                    list: res.data && [{
                        id: 0,
                        ...res.data,
                    }] || []
                });
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    useEffect(() => {
        if (canEdit === true) {
            setColumns([
                ...columns,
                {
                    title: '操作',
                    dataIndex: 'operate',
                    width: axconst.width.two,
                    render: (val: any, record: any) => (
                        <AxColumnAction
                            buttons={[
                                {
                                    text: '修改',
                                    onClick: () => handleUpdateModal(record),
                                }
                            ]}
                        />
                    ),
                },
            ]);
        }
    }, [canEdit]);

    const handleUpdateModal = (record: any) => {
        setUpdateVisible(true);
        setOperateValues(record);
    }

    const handleCallback = (fields: any) => {
        setData({
            list: [{
                ...data.list,
                ...fields,
            }]
        });
    }

    const updateProps = {
        recordId: recordId,
        values: operateValues,
        visible: updateVisible,
        handleVisible: setUpdateVisible,
        handleCallback: handleCallback,
    }

    return (
        <>
            <AxTable
                bordered
                size="small"
                title={() => '业务表单'}
                loading={loading}
                resizable={false}
                checkboxModel={false}
                data={data}
                columns={columns}
                showPagination={null}
                addemptycolumn={true}
            />
            {updateVisible && <Update {...updateProps} />}
        </>
    );
};

/** 修改业务表单 */
const UpdateEx: React.FC<any> = props => {
    const { form, values, recordId, handleVisible, handleCallback, ...rest } = props;
    const [schemes, setSchemes] = useState<any>([]);
    const [campus, setCampus] = useState<any>([]);
    const [majors, setMajors] = useState<any>([]);
    const [features, setFeatures] = useState<any>([]);
    const [feeSchemes, setFeeSchemes] = useState<any>([]);
    const { getX } = axhttp;

    useEffect(() => {
        // const orgId = JSON.parse(localStorage.getItem('ax-data-app') || '').orgId;
        // getX(url.readEnrollSchemeList, { orgId }).then((res: any) => {
        //     setSchemes(axhelper.transToStandardData(res.data, 'id', 'name'));
        // });
    }, []);

    const handleChange = (schemeId: any) => {
        if (schemeId) {
            getX(url.readSchemeCampusList, { schemeId }).then((res: any) => {
                setCampus(axhelper.transToStandardData(res.data, 'id', 'name'));
            });
            getX(url.readMajorList, { schemeId }).then((res: any) => {
                setMajors(axhelper.transToStandardData(res.data, 'id', 'name'));
            });
            getX(url.readEnrollFeatureList, { schemeId }).then((res: any) => {
                setFeatures(axhelper.transToStandardData(res.data, 'id', 'name'));
            });
        } else {
            setMajors([]);
            setCampus([]);
            setFeatures([]);
            setFeeSchemes([]);
        }
        getFeeScheme({ schemeId, majorId: undefined, campusId: undefined, featureId: undefined, planId: undefined });
    }

    const getFeeScheme = (obj: any) => {
        const schemeId = obj.hasOwnProperty('schemeId')
            ? obj.schemeId
            : form.getFieldValue('schemeId');
        const majorId = obj.hasOwnProperty('majorId')
            ? obj.majorId
            : form.getFieldValue('majorId');
        const campusId = obj.hasOwnProperty('campusId')
            ? obj.campusId
            : form.getFieldValue('campusId');
        const featureId = obj.hasOwnProperty('featureId')
            ? obj.featureId
            : form.getFieldValue('featureId');

        if (schemeId && majorId && campusId && featureId) {
            const fd0 = schemes.find((f: any) => f.value === schemeId);
            if (fd0) {
                form.setFieldsValue({
                    schemeName: fd0.text,
                });
            }
            const fd1 = majors.find((f: any) => f.value === majorId);
            if (fd1) {
                form.setFieldsValue({
                    majorName: fd1.text,
                });
            }
            const fd2 = campus.find((f: any) => f.value === campusId);
            if (fd2) {
                form.setFieldsValue({
                    campusName: fd2.text,
                });
            }
            const fd3 = features.find((f: any) => f.value === featureId);
            if (fd3) {
                form.setFieldsValue({
                    featureName: fd3.text,
                });
            }
            // studentId: studentStatusId,
            getX(url.readRepeatFee, { schemeId, majorId, campusId, featureId }).then((res: any) => {
                setFeeSchemes(axhelper.transToStandardData(res.data, 'id', 'name'));
            });
        }
        else {
            setFeeSchemes([]);
        }
    };

    const handleChangeFeeScheme = (value: any) => {
        const f = feeSchemes.find((f: any) => f.value === value);
        if (f) {
            form.setFieldsValue({
                planName: f.text,
            });
        }
    }

    const handleUpdate = (fields: any) => {
        return postFormX(url.editFormData, null, { recordId, ...fields }).then((res: any) => {
            message.success('修改成功');
            handleCallback && handleCallback(fields);
            handleVisible(false);
        });
    }

    return (
        <>
            <AxUpdateForm
                form={form}
                title={'修改业务表单'}
                {...rest}
                handleUpdate={handleUpdate}
                handleVisible={handleVisible}
                items={[
                    <AxInput form={form} label="所属部门" field="schemeId" value={values.schemeName} />,
                    <AxInput form={form} label="采购主体地址" field="campusId" value={values.campusName} />,
                    <AxTextArea form={form} label="申请说明" field="majorId" value={values.majorName} autoSelect />,
                ]}
                hiddenItems={[
                    <AxInput form={form} field='schemeName' htmlHidden={true} />,
                    <AxInput form={form} field='campusName' htmlHidden={true} />,
                    <AxInput form={form} field='majorName' htmlHidden={true} />,
                    <AxInput form={form} field='featureName' htmlHidden={true} />,
                    <AxInput form={form} field='planName' htmlHidden={true} />,
                ]}
            />
        </>
    )
};

const Update = Form.create<any>()(UpdateEx);


